<template>
  <div>
    <FlowDesign ref="flowDesign" />
  </div>
</template>
<script setup>
import FlowDesign from "../components/FlowDesign/index.vue";
import { useStore } from "vuex";
import { ref, reactive, toRefs, nextTick, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();

//const fromDate = ref("");

const fromDate = ref("{\n    \"config\": {\n        \"version\": \"0.5\",\n        \"formRef\": \"elForm\",\n        \"formModel\": \"form\",\n        \"rules\": \"rules\",\n        \"size\": \"default\",\n        \"labelPosition\": \"right\",\n        \"labelWidth\": 80,\n        \"formRules\": \"rules\",\n        \"gutter\": 15,\n        \"disabled\": false,\n        \"dynamicTableAllowed\": true\n    },\n    \"list\": [\n        {\n            \"id\": \"fd_1694187763213\",\n            \"key\": \"fd_1694187763213\",\n            \"type\": \"input\",\n            \"name\": \"单行文本\",\n            \"icon\": \"input\",\n            \"viewType\": \"text\",\n            \"options\": {\n                \"config\": true,\n                \"showLabel\": true,\n                \"placeholder\": \"请输入文本\",\n                \"required\": false,\n                \"span\": 24,\n                \"width\": \"100%\",\n                \"clearable\": true,\n                \"disabled\": false,\n                \"readonly\": false,\n                \"status\": \"normal\",\n                \"prefix-icon\": \"\",\n                \"suffix-icon\": \"\",\n                \"value\": \"\",\n                \"rulesType\": \"default\",\n                \"prepend\": \"\",\n                \"append\": \"\",\n                \"layout\": \"colItem\"\n            },\n            \"rules\": []\n        }\n    ]\n}")
// onMounted(() => {
//   fromDate.value = "";
// });



//import FlowDesign from "../components/FlowDesign/index.vue";
//import OrgPicker.vue from "../components/OrgPicker.vue.vue";

console.log(typeof fromDate.value);


watch(
  fromDate,
  (newValue, oldValue) => {
    console.log("newValue" + JSON.stringify(newValue));
  },

  { immediate: true }
);

// const data = reactive({
//   loginUser:{}
// })
// const { loginUser } = toRefs(data);
// const showUserSelect = ref(true);
// const orgPicker = ref(null);
// function selected(select){
//   select = select
//   loginUser = select.length > 0 ? select[0]:''
//   showUserSelect = false
//   sessionStorage.setItem("user", JSON.stringify(loginUser))
// }
// function to(path){
//   if (loginUser === null || loginUser === ''){
//     //$message.warning("请先选择一个人员身份进行登录")
//   }else {
//     //$router.push(path)
//   }

//   router.push(path)
// }

// // 延迟使用，因为还没挂载
// nextTick(() => {
//  orgPicker.value.show()
//})
</script>
<style lang="less" scoped>
// h4 {
//   margin: 0 auto;
//   color: #38adff;
//   margin-top: 150px;
// }

// .user{
//   position: absolute;
//   left: 20%;
//   margin-top: 20px;
//   div{
//     margin-left: 20px;
//     display: inline-block;
//   }
// }

// .work-panel {
//   text-align: left;
//   display: flex;
//   justify-content: center;
//   position: relative;
//   .panel {
//     margin-top: 80px;
//     max-width: 700px;
//     display: flex;
//     justify-content: center;

//     .panel-item {
//       cursor: pointer;
//       margin: 0 40px;
//       width: 250px;
//       padding: 10px;
//       display: inline-block;
//       background: #ffffff;
//       border-radius: 10px;
//       border: 1px solid #ffffff;
//       box-shadow: 1px 1px 8px 0 #b0b0b1;

//       &:hover {
//         border: 1px solid #2594ff;
//         box-shadow: 1px 1px 13px 0 #a4a4a5;
//       }

//       div:nth-child(1) {
//         color: #7a7a7a;
//         font-weight: bold;
//         height: 60px;
//         line-height: 60px;
//         font-size: large;
//         border-bottom: 1px solid #cccdcd;

//         span {
//           margin-left: 30px;
//         }
//       }

//       i {
//         padding: 8px;
//         color: #ffffff;
//         background: #2594ff;
//         font-size: 25px;
//         border-radius: 5px;
//       }

//       .el-icon-s-platform {
//         background: rgb(255, 148, 62);
//       }

//       p {
//         padding: 10px 0;
//         color: #7a7a7a;
//         font-size: medium;
//       }
//     }
//   }

// }
</style>